<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分配角色</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
</head>
<body>
<!-- 用户当前角色信息展示盒子 -->
<div class="layui-card" style="margin: 10px;">
    <div class="layui-card-header">当前用户角色信息</div>
    <div class="layui-card-body">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" id="current-username" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">个人角色：</label>
            <div class="layui-input-block">
                <input type="text" id="current-person-roles" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门角色：</label>
            <div class="layui-input-block">
                <input type="text" id="current-department-role" class="layui-input" readonly>
            </div>
        </div>
    </div>
</div>
<form class="layui-form" method="POST" action="" id="layui-form" autocomplete="off">
    <div class="layui-card-header">修改用户角色</div>
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <select name="department" id="department" lay-filter="department" class="layui-select">
                        <!-- 动态加载部门选项 -->
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">个人角色</label>
                <div class="layui-input-block">
                    <div id="role-checkboxes"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门角色</label>
                <div class="layui-input-block">
                    <div id="role-radios"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn  layui-btn-sm" lay-submit=""
                    lay-filter="user-save" id="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:inline="javascript">
    layui.use(['form', 'jquery'], function () {
        let baseURL = /*[[@{/}]]*/ '';
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$
        // 获取角色数据并生成复选框
        $.ajax({
            url: baseURL + 'role/personRoleList',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                let roleCheckboxesContainer = $('#role-checkboxes');
                roleCheckboxesContainer.empty();
                data.data.forEach(function (item) {
                    let checkbox = $('<input type="checkbox" style="width:25%" name="roleIds[]" value="' + item.roleId + '" title="' + item.roleName + '">');
                    // 注意：name 属性设置为 roleIds[]，这样后端可以接收为一个数组
                    roleCheckboxesContainer.append(checkbox);
                });
                form.render('checkbox'); // 重新渲染表单
            },
        });
        // 获取部门角色数据并生成单选框
        $.ajax({
            url: baseURL + 'role/departmentRoleList', // 假设接口改为获取部门角色
            type: 'get',
            dataType: 'json',
            success: function (data) {
                let roleRadiosContainer = $('#role-radios'); // 建议更换容器ID以区分
                roleRadiosContainer.empty();
                data.data.forEach(function (item) {
                    let radio = $('<input type="radio" name="roleId" value="' + item.roleId + '" title="' + item.roleName + '">');
                    roleRadiosContainer.append(radio);
                });
                form.render('radio'); // 重新渲染表单
            },
        });

        // 监听表单提交
        form.on('submit(user-save)', function (data) {

            // 获取提交按钮
            let submitButton = $('#user-save');
            // 禁用按钮，防止重复提交
            submitButton.addClass('layui-btn-disabled').attr('disabled', 'disabled');
            // 收集所有被选中的复选框的值
            let selectedRoleIds = [];
            $('input[name="roleIds[]"]:checked').each(function () {
                selectedRoleIds.push($(this).val());
            });
            let departmentId = $('#department').val()
            // 将这些值添加到表单数据中
            let formData = {
                roleIds: selectedRoleIds,
                userId: parent.userId,
                departmentRoleId: data.field.roleId,
                departmentId: departmentId
            }
            console.log(formData)
            // 发送 AJAX 请求
            $.ajax({
                url: baseURL + 'user/fpRole',
                type: 'post',
                data: JSON.stringify(formData),
                dataType: 'json',
                contentType: 'application/json',
                success: function (result) {
                    if (result.code === 1000) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 2000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name)); // 关闭当前页
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                    // 5秒后重新启用按钮
                    setTimeout(function () {
                        submitButton.removeClass('layui-btn-disabled').removeAttr('disabled');
                    }, 5000);
                },
                error: function (xhr, status, error) {
                    console.error("Error occurred: " + error);
                    // 可以在这里添加错误处理逻辑
                }
            });
            return false; // 阻止表单的默认提交行为
        });
    });
</script>
</body>
</html>
